<template>
	<view class="page">
		<q-navbar title="预约申请" :isBack="true" />
		<view class="page_container">
			<u-form :model="form" ref="uForm" label-width="150" :errorType="['message']">
				<u-form-item required label="办理人" prop="name" borderBottom>
					<u-input v-model="form.name" :border="false" placeholder='请输入' inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item required label="办理业务" prop="typeId" borderBottom>
					<q-dict v-model="form.typeId" :type="dictList" ref="typeId" :dictClick='false' :arrow="true"
						@dict="(value,label)=>form.typeId=value" />
				</u-form-item>
				<u-form-item label="内容" prop="content" borderBottom>
					<u-input v-model="form.content" :border="false" placeholder='请输入' inputAlign='right'></u-input>
				</u-form-item>
				<u-form-item required label="预约时间" prop="appointTime" borderBottom label-position="top">
					<view class="time">
						<view :class="['timeItem',{isActive:current==i}]" v-for="(v,i) in timeList" :key="i"
							@click="changeClick(v,i)">
							{{v}}
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<q-button name="提交" :isPosition="true" @submit="submit" />
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				callNumTime: "",
				form: {},
				dictList: [],
				timeList: [],
				current: null,
				rules: {
					// 字段名称
					name: [{
						required: true,
						message: '请输入办理人名称',
						trigger: ['change', 'blur'],
					}],
					typeId: [{
						required: true,
						message: '请选择办理业务',
						trigger: ['change', 'blur'],
					}],
					appointTime: [{
						required: true,
						message: '请选择预约时间',
						trigger: ['change', 'blur'],
					}]
				},
			}
		},
		watch: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.form.name = this.$s.get('userInfo').userName
			if (options) {
				this.form.callNumId = options.id
				this.callNumTime = options.time
				this.findType()
			}
		},
		onShow() {
			this.findDict()
		},
		methods: {
			changeClick(v, i) {
				this.form.appointTime = this.dayjs(`${this.callNumTime} ${v}`).format('YYYY-MM-DD HH:mm')
				this.current = i
			},
			submit() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						let res = await this.$api.appointmentForm(this.form)
						console.log('res', res);
						if (res.code == 200) {
							this.$msg.default('预约成功！')
							this.router.push({
								path: '/pages/reservation/reservation',
							})
						}
					} else {
						return false
					}
				})
			},
			async findDict() {
				let res = await this.$api.getTypeList('yylx_jh')
				console.log('办理类型', res);
				this.dictList = res.data
			},
			async findType() {
				let res = await this.$api.selectTypeById('luc36itz-1d5975od-hsuwll-0000001')
				this.timeList = this.createTimeIntervals(`${this.callNumTime} ${res.data.comment}`,
					`${this.callNumTime} ${res.data.remark}`)
			},
			createTimeIntervals(startStr, endStr) {
				// 将字符串转换为Date对象
				const startDate = new Date(startStr);
				const endDate = new Date(endStr);

				// 初始化结果数组
				const intervals = [];

				// 开始循环
				while (startDate <= endDate) {
					// 检查是否处于午休时间
					if (
						(startDate.getHours() >= 12 && startDate.getHours() < 14) ||
						(startDate.getHours() === 12 && startDate.getMinutes() > 0)
					) {
						// 跳过午休时间，将时间增加至下午2点
						startDate.setHours(14);
						startDate.setMinutes(0);
						startDate.setSeconds(0);
						continue;
					}

					// 将当前时间（格式化为小时和分钟）添加到结果数组
					intervals.push(
						`${startDate.getHours().toString().padStart(2, '0')}:${startDate.getMinutes().toString().padStart(2, '0')}`
					);

					// 将当前时间增加半小时
					startDate.setMinutes(startDate.getMinutes() + 30);
				}

				// 返回时间间隔数组
				return intervals;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;

		.page_container {
			padding: 30rpx;

			.time {
				display: flex;
				flex-wrap: wrap;

				.timeItem {
					border: 2rpx solid #eee;
					margin: 10rpx;
					padding: 0 8rpx;
					border-radius: 15rpx;
				}
			}


		}

		.isActive {
			background-color: skyblue;
			color: #fff;
		}
	}
</style>